<template>
	<view class="toClassify">
		<Navigation title="商城" background="#FABB3C" titleColor="#fff" />
		<view class="top-box ph-24 pv-14 f ai-c jc-s-b">
			<view class="f f1">
				<view class="search w-f" @click="searchTap">
					<u-search placeholder="快速查找戳我" v-model="queryParams.keyword" height="30" bgColor="#FFFFFF"
						searchIconColor="#999" placeholderColor="#999" clearabled :showAction="false">
					</u-search>
					<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
							@click.stop="handelSearch"></u-button></view>
				</view>
			</view>
			<view class="w-40 h-40 ml-24 cart" @click="toCart">
				<image src="http://cwht.ricecs.cn/app/shop/cart.png" class="w-40 h-40"></image>
				<view class="w-20 h-20 b-20" v-show="cartCount > 0"></view>
			</view>
		</view>

		<view class="f list">
			<scroll-view scroll-y="true" :style="{ height: height + 'px' }" class="box w-150">
				<view class="w-150">
					<view v-for="(item, index) in classify" :key="index" class="w-150 h-96 f ai-c jc-c fs-24 text-color4"
						:class="typeCurt == index ? 'active' : ''" @click="changeClassify(index)">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<view class="f f1 fd-c">
				<view class="f ai-c h-80">
					<view class="w-420">
						<u-tabs :list="twoClassify" lineColor="#FABB3C"
							:activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
							:inactiveStyle="{ fontSize: '28rpx', color: '#999999' }" @click="changeTwoClassify" :current="twoCurt">
						</u-tabs>
					</view>
					<view class="f f1 ai-c jc-c" @click="show = !show">
						<image src="http://cwht.ricecs.cn/app/shop/sort.png" class="w-24 h-24"></image>
						<view class="fs-24 mr-8" :class="show ? 'text-color' : 'text-color4'">{{ sortList[sortType].name }}</view>
					</view>
				</view>
				<scroll-view scroll-y="true" :style="{ height: height - 40 + 'px' }" @scrolltolower="scrolltolower">
					<view class="f jc-s-b mt-20 ph-16">
						<view class="mr-16">
							<view v-for="(item, index) in listL" :key="index" class="w-276 b-24 ph-8 pt-8 pb-20 goods mb-16"
								@click="toDetail(item)">
								<image :src="item.picUrl" class="w-260 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
									<view class="fs-22 text-color3 old-price">¥{{item.originalPrice}}</view>
									<!-- <view class="mt-17"><view class="fs-22 ph-8 pv-1 top">猫猫主粮TOP1</view></view> -->
								</view>
							</view>
						</view>
						<view>
							<view v-for="(item, index) in listR" :key="index" class="w-276 b-24 ph-8 pt-8 pb-20 goods mb-16"
								@click="toDetail(item)">
								<image :src="item.picUrl" class="w-260 b-24" mode="widthFix"></image>
								<view class="ph-12">
									<view class="fs-28 fw-600 mt-16 text-color4 text-ellipsis-2">{{ item.name }}</view>
									<view class="mt-8 fs-30 fw-600 text-color7">¥{{ item.price }} 到手价</view>
									<view class="fs-22 text-color3 old-price">¥{{item.originalPrice}}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 遮罩 -->
					<view class="shade" v-show="show">
						<view class="w-200 types b-12 ph-20" :style="{ top: statusBarHeight + 150 + 'px' }">
							<view class="up"></view>
							<view class="h-100 w-f f ai-c jc-c fs-32 text-color4 border"
								:class="sortType == index ? 'sort-active' : ''" v-for="(item, index) in sortList" :key="index"
								@click="changeSort(index, item)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { categoryFirstList, categorySecondList, spuPage, categoryTopList } from '@/services/api/shop/index';
	import { cartGetCount } from '@/services/api/shop/cart';

	const classify = ref<any[]>([]);
	const typeCurt = ref(0);
	const twoClassify = ref<any[]>([]);
	const twoCurt = ref(0);
	const show = ref<boolean>(false);
	const sortList = [
		{ name: '智能排序', sortField: 'intelligent', sortAsc: true },
		{ name: '销量升序', sortField: 'salesCount', sortAsc: true },
		{ name: '销量降序', sortField: 'salesCount', sortAsc: false },
		{ name: '价格升序', sortField: 'price', sortAsc: true },
		{ name: '价格降序', sortField: 'price', sortAsc: false },
		{ name: '好评升序', sortField: 'favorable', sortAsc: false },
		{ name: '好评降序', sortField: 'favorable', sortAsc: true },
	];
	const sortType = ref(0);
	const parentId = ref(null);
	const id = ref(null);
	const queryParams = ref({
		type: 2,
		sortAsc: true,
		pageNo: 1,
		pageSize: 10,
		firstCategoryId: null,
		secondCategoryId: null,
		sortField: 'intelligent',
		keyword: '',
	});
	const listL = ref<any>([]);
	const listR = ref<any>([]);
	const cartCount = ref(0);
	const isNew = ref<string>('false');

	onLoad((options : any) => {
		console.log(options);
		//true是新人  false是老用户
		isNew.value = options.isNew;

    if (options.isNew == "false"){
      queryParams.value.type = 3;
    }
		listL.value = [];
		listR.value = [];
		parentId.value = options.parentId;
		// id.value = options.id;
		getCategoryFirstList();
	});
	onShow(() => {
		getCartCount();
	});
	watch(
		() => [show?.value],
		() => {
			if (show?.value) {
				document.body.style.overflow = 'hidden';
			} else {
				document.body.style.overflow = '';
			}
		}
	);

	function toCart() {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	}
	//获取购物车数量
	async function getCartCount() {
		const { data } = await cartGetCount({});
		cartCount.value = data;
	}
	//搜索
	function handelSearch() {
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//上拉加载
	function scrolltolower() {
		queryParams.value.pageNo++;
		getSpuPage();
	}
	//获取商品
	async function getSpuPage() {
		const { data } = await spuPage(queryParams.value);
		if (data.list.length > 0) {
			data.list.forEach((item : any, index : number) => {
				if (index % 2 === 0) {
					listL.value.push(item);
				} else {
					listR.value.push(item);
				}
			});
		}
	}
	//获取一级分类
	async function getCategoryFirstList() {
		const topcategory = await categoryTopList({ type: 0, spuType: queryParams.value.type });
		
		classify.value = topcategory.data;
		

		getCategorySecondList();
	}

	//获取二级分类
	async function getCategorySecondList() {
		queryParams.value.firstCategoryId = classify.value[typeCurt.value].id;
		const { data } = await categorySecondList({ type: 0, parentId: queryParams.value.firstCategoryId, spuType: queryParams.value.type });
		twoCurt.value = 0;
		twoClassify.value = data;
		queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//切换二级分类
	function changeTwoClassify(data : any) {
		twoCurt.value = data.index;
		queryParams.value.secondCategoryId = twoClassify.value[twoCurt.value].id;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	}
	//切换一级分类
	function changeClassify(index : number) {
		typeCurt.value = index;
		getCategorySecondList();
	}
	const changeSort = (index : number, data : any) => {
		sortType.value = index;
		show.value = false;
		queryParams.value.sortField = data.sortField;
		queryParams.value.sortAsc = data.sortAsc;
		listL.value = [];
		listR.value = [];
		getSpuPage();
	};
	const toDetail = (data : any) => {
		uni.navigateTo({
			url: `/pages_shop/productDetails/index?status=shop&id=${data.id}`,
		});
	};
	uni.setNavigationBarColor({
		frontColor: '#ffffff',
		backgroundColor: '#ffffff',
	});
	let systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let pageHeight = systemInfo.windowHeight;
	const height = pageHeight - statusBarHeight - 46 - 43;
	console.log(height);
</script>
<style lang="scss" scoped>
	.toClassify {
		.shade {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.12);
			left: 0;
			top: 0;

			.types {
				position: fixed;
				right: 16rpx;
				background: #fff;

				.up {
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-right: 16rpx solid transparent;
					border-left: 16rpx solid transparent;
					border-bottom: 16rpx solid #ffffff;
					position: absolute;
					top: -32rpx;
					left: 50%;
					margin-left: -8rpx;
				}

				.border {
					border-bottom: 1px solid #f8f8f8;
				}

				.sort-active {
					background: #f8f8f8;
				}

				view:nth-child(1) {
					border-radius: 12rpx 12rpx 0 0;
				}

				view:nth-child(2) {
					border-radius: 0 0 12rpx 12rpx;
				}
			}
		}

		.old-price {
			text-decoration: line-through;
		}

		.goods {
			background: #f5f5f5;
		}

		.list {
			.box {
				background: #f5f5f5;
				height: 100%;
			}

			.list-content {
				height: 100%;
			}

			.list-box {
				height: 100%;

				.text {
					border: 2rpx solid #f0f0f0;
				}
			}

			.active {
				background: #fff;
				color: #fabb3c;
				position: relative;
			}

			.active::after {
				position: absolute;
				background: #fabb3c;
				height: 40rpx;
				width: 6rpx;
				top: 50%;
				margin-top: -20rpx;
				left: 0;
				content: '';
			}
		}

		.top-box {
			background: #fabb3c;
		}

		.cart {
			position: relative;

			view {
				background: #f54040;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.search {
			position: relative;
			background: #fabb3c;

			.search-btn {
				position: absolute;
				right: 6rpx;
				top: 6rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}

			// ::v-deep .u-search__content {
			//     justify-content: flex-start !important;
			// }
			// ::v-deep .u-search__content__input {
			//     width: 80%;
			//     flex: none !important;
			// }
		}
	}
</style>